<template>
  <div>
    <van-search show-action shape="round" placeholder="请输入搜索关键词">
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <van-tree-select
      tree-select-item-active-color:black
      height="80vw"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <van-image v-if="active === 0">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <router-link to="/list" class="zhong"
                ><van-image
                  src="https://img12.yiguoimg.com/e/items/2017/170615/9288709152481999_220.jpg"
                  rel="external nofollow"
                />
              </router-link>

              <span>全部</span>
            </van-grid-item>

            <van-grid-item>
              <router-link to="/List" class="zhong">
                <van-image
                  src="https://img10.yiguoimg.com/d/items/2018/180803/9570202619127043_220.jpg"
                  rel="external nofollow"
                />
                <span>牛排</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img09.yiguoimg.com/e/items/2017/170615/9288709152318159_220.jpg"
                  rel="external nofollow"
                />
                <span>进口牛肉</span>
              </router-link>
            </van-grid-item>
          </van-grid>
        </van-image>

        <van-image v-if="active === 1">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <router-link to="/List" class="zhong">
                <van-image
                  src="https://img13.yiguoimg.com/e/items/2017/170619/9288709276607187_220.jpg"
                  rel="external nofollow"
                />
                <span>全部</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img12.yiguoimg.com/d/items/2019/190813/9570213791409933_144.jpg"
                  rel="external nofollow"
                />
                <span>大闸蟹券</span>
              </router-link>
            </van-grid-item>
          </van-grid>
        </van-image>

        <van-image v-if="active === 2">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <router-link to="/List" class="zhong">
                <van-image
                  src="https://img10.yiguoimg.com/e/items/2017/170615/9288709121811151_220.jpg"
                  rel="external nofollow"
                />
                <span>全部</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/List" class="zhong">
                <van-image
                  src="https://img14.yiguoimg.com/e/items/2017/170615/9288709120664271_220.jpg"
                  rel="external nofollow"
                />
                <span>杂粮干活</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/List" class="zhong">
                <van-image
                  src=" https://img13.yiguoimg.com/e/items/2017/170615/9288709120631503_220.jpg"
                  rel="external nofollow"
                />
                <span>坚果零食</span>
              </router-link>
            </van-grid-item>
          </van-grid>
        </van-image>
        <van-image v-if="active === 3">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img10.yiguoimg.com/e/items/2017/170615/9288709121811151_220.jpg"
                  rel="external nofollow"
                />
                <span>全部</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img09.yiguoimg.com/e/items/2017/170615/9288709121778383_220.jpg"
                  rel="external nofollow"
                />
                <span>水</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img14.yiguoimg.com/e/items/2017/170615/9288709121712847_220.jpg"
                  rel="external nofollow"
                />
                <span>冲茶饮料</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img11.yiguoimg.com/e/items/2017/170615/9288709121680079_220.jpg"
                  rel="external nofollow"
                />
                <span>葡萄酒/酒具</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img11.yiguoimg.com/d/items/2019/190617/9288738284840657_220.jpg"
                  rel="external nofollow"
                />
                <span>休闲食品</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img14.yiguoimg.com/d/items/2017/171122/9288715459765110_220.jpg"
                  rel="external nofollow"
                />
                <span>啤酒</span>
              </router-link>
            </van-grid-item>
          </van-grid>
        </van-image>
        <van-image v-if="active === 4">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img14.yiguoimg.com/e/items/2017/170615/9288709151761103_220.jpg"
                  rel="external nofollow"
                />
                <span>全部</span>
              </router-link>
            </van-grid-item>
            <van-grid-item>
              <router-link to="/list" class="zhong">
                <van-image
                  src="https://img12.yiguoimg.com/e/items/2017/170615/9288709121516239_220.jpg"
                  rel="external nofollow"
                />
                <span>礼品礼盒</span>
              </router-link>
            </van-grid-item>
          </van-grid>
        </van-image>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import Vue from "vue";
import { TreeSelect, Image, Grid, GridItem } from "vant";
import { Search } from "vant";

Vue.use(Search);
Vue.use(TreeSelect);
Vue.use(Image);
Vue.use(Grid);
Vue.use(GridItem);

export default {
  data() {
    return {
      active: 0,
      items: [
        { text: "精选肉类" },
        { text: "海鲜水产" },
        { text: "粮油杂货" },
        { text: "食品饮料" },
        { text: "礼品礼券" },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
//左侧的绿色竖线样式
.van-sidebar-item--select::before {
  width: 2px;
  height: 60px;
  background-color: #11b57c;
}
//左侧整体
.van-sidebar-item {
  box-sizing: border-box;
  padding: 20px 12px;
  overflow: hidden;
  // color: #333;
  font-size: 13px;
  line-height: 20px;
  // background-color: #f7f8fa;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
//左侧点击字体变色样式
.van-sidebar-item--select {
  color: #11b57c;
  font-weight: 50;
  text-align: center;
}
.van-tree-select {
  font-size: 3px;
}
.zhong {
  text-align: center;
}
</style>


